@extends('master/master_index')

@section('title')
    <title>关注通知</title>
@endsection

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('home/css/msg.css')}}">
@endsection

@section('content')
    <div class="msg_left_div">
        <ul>
            <a href="{{'user_msg'}}"><li ><i class="Hui-iconfont">&#xe68a;</i>消息</li></a>
            <a href="{{'user_msg_topic'}}"><li class="msg_green"><i class="Hui-iconfont">&#xe6c7;</i>通知</li></a>
        </ul>
    </div>
    <div class="msg">
        <div class="msg_top"><i class="Hui-iconfont">&#xe627;</i> 关注提醒</div>
        @if(count($topic)>0)
            <ul class="answer">
                @foreach($topic as $a)
                    <li>
                        <img src="{{asset($a->user->profile->avatar)}}">
                        <span>你所关注的<a href="{{url('userCenter')}}/user={{$a->user_id}}">{{$a->user->username}}</a>发表了新文章:</span>
                        <span class="answer_time">at{{$a->created_at->diffForHumans()}}</span>
                        @if($a->read==0)
                            <div class="read looked"><i class="Hui-iconfont">&#xe68a;</i> 未读 <input type="hidden" value="{{$a->id}}"></div>
                        @else
                            <div class="read"><i class="Hui-iconfont">&#xe70b;</i> 已读</div>
                        @endif
                        <p>&nbsp;&nbsp;<a href="{{url('topic')}}/topics={{$a->topic['id']}}">{{$a->topic->title}}</a></p>
                    </li>
                @endforeach
            </ul>
            <div class="remind_all">加载完毕~~</div>
        @else
            <div class="msg_none">
                暂无消息
            </div>
        @endif
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        $('.looked').click(function () {
            var self = this;
            var remind_id=$(this).find('input').val();
            $.ajax({
                type: 'POST',
                url:'{{url('remind/read')}}',
                data: {remind_id:remind_id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function () {
                    var div=$('<div>').addClass('read').html('已读');
                    var i=$('<i>').addClass('Hui-iconfont').html('&#xe70b;&nbsp;').prependTo(div)
                    $(self).html(div)
                },
                error: function () {
                    alert('Ajax error!')
                }
            });
        })
    </script>
@endsection